<template>
	<view style="height: 100vh;overflow: hidden;">
		<view class="yqgz" @click="jumpurl('/pages/system?type=5')">邀请规则</view>
		<view class="mainpadding4 topbgc">
			<view class="topdingwei">
				<image src="@/static/image/system/sharebg.png" mode=""></image>
			</view>
			<view class="flexcenter margin_top3">
				<text class="toptext">速鉴奢拍</text>
				<!-- <text class="toptext">岁月留痕</text> -->
			</view>
			<view class="flexcenter margin_top">
				<text class="toptext" style="font-size: 60rpx;">为二奢同行交易赋能</text>
			</view>
		</view>
		<view class="wallitbg">
			<image src="../static/image/system/wallitbg.png" class="wallitbgimg" mode=""></image>
			<view class="flexcolumn" style="position: relative;z-index: 100;padding-top: 60rpx;">
				<view class="xiaohei fonweight" style="font-size: 40rpx;">我的邀请好友</view>
				<view class="margin_top6" v-if="is_login && !showPoster">
					<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="qrcodeurl" :options="{ margin: 10}"
						size="150">
					</uqrcode>
				</view>
				<view class="margin_top6 flexcenter xiaohei titletext" style="height: 300rpx;"  v-if="is_login && showPoster"></view>
				<view class="margin_top6 flexcenter xiaohei titletext" style="height: 300rpx;" v-if="!is_login">
					未登录，请登陆后查看
				</view>
				<view class="margin_top6 flexcenter">
					<text class="sanshier fonweight xiaojin">邀请码：</text>
					<view class="wzyqm margin_right1" v-for="item in userInfo.invite_code" v-if="is_login">{{item}}
					</view>
					<view class="wzyqm margin_right1" v-for="item in 9" v-if="!is_login">*</view>
				</view>
			</view>
			<view class="flexbetween mainpadding4" style="margin-top: 100rpx;">
				<view class="sharebox flexbetween" @click="jumpurl('/pages_mypage/wodetd')">
					<image src="../static/image/system/td.png" mode=""></image>
					<view class="">
						<view class="textright xiaojin ershiba">团队人数(人)</view>
						<view class="textright xiaohei sanshier margin_top1 fonweight" v-if="is_login">
							{{userInfo.total_team_num}}
						</view>
						<view class="textright xiaohei sanshier margin_top1 fonweight" v-if="!is_login">0</view>
					</view>
				</view>
				<view class="sharebox flexbetween">
					<image src="../static/image/system/sy.png" mode=""></image>
					<view class="">
						<view class="textright xiaojin ershiba">累计收益(元)</view>
						<view class="textright xiaohei sanshier margin_top1 fonweight" v-if="is_login">
							{{userInfo.total_syprice}}
						</view>
						<view class="textright xiaohei sanshier margin_top1 fonweight" v-if="!is_login">0.00</view>
					</view>
				</view>
			</view>
			<view class="flexbetween" style="padding: 0 30rpx;">
				<view class="bigbtn flexcenter" style="border-radius: 0; width: 48%;background-color: #fff1dd;border: 1rpx solid #b99652;color: #b99652;box-sizing: border-box;" v-if="is_login" @tap="onPoster">保存图片</view>
				<button hover-class="none" open-type="share" v-if="is_login" style="width: 48%;">
					<view class="bigbtn flexcenter" style="border-radius: 0;">邀请好友</view>
				</button>
				<view class="bigbtn flexcenter" style="border-radius: 0;" v-if="!is_login">
					<text class="margin_right2" style="font-size: 34rpx;" @click="login()">邀请好友</text>
					<image src="../static/image/system/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: showPoster }" @tap="onClosePoster">
			<view class="cu-dialog" style="width: 640rpx;background: none;">
				<view class="poster-img-box">
					<image class="poster-img" :src="posterImage" mode="widthFix"></image>
				</view>
				<view class="poster-btn-box u-m-t-20 flexbetween u-flex u-row-between u-col-center" v-show="posterImage">
					<button class="cancel-btn u-reset-button" @tap="showPoster = false">取消</button>
					<button class="save-btn u-reset-button" @tap="saveImage">保存图片</button>
				</view>
			</view>
		</view>
		<!-- 各海报模块 -->
		<shopro-canvas v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess">
		</shopro-canvas>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				qrcodeurl: "",
				is_login: false,
				userInfo: {},
				showShareGuide: false, //H5的指引。
				showPoster: false, //海报弹窗
				posterImage: '',
				canvasParams: {},
				posterType:"user"
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '速鉴奢拍 为二奢同行交易赋能',
				imageUrl: '',
				path: '/pages/homepage?code=' + uni.getStorageSync("invite_code")
			}
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
				if (this.qrcodeurl == "") {
					this.getsystem()
				}
			} else {
				this.userInfo = {}
			}
			// this.stop()
		},
		onHide() {
			// this.move()
		},
		methods: {
			login() {
				uni.navigateTo({
					url: "/pages/login"
				})
			},
			jumpurl(url) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				uni.navigateTo({
					url
				})
			},
			getsystem() {
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "about_set",
					type: "share_url",
				}).then(res => {
					this.qrcodeurl = res.data + "?code=" + uni.getStorageSync("invite_code")
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} else {
						this.userInfo = {}
					}
				})
			},
			stop() {
				var box = function(e) {
					passive: false;
				};
				document.body.style.overflow = 'hidden'
			},
			move() {
				var box = function(e) {
					passive: false;
				};
				document.body.style.overflow = '';
			},

			// 关闭弹窗
			onClosePoster() {
				this.showPoster = false;
				// uni.showTabBar();
				// uni.hideTabBar();
			},
			// 绘制成功
			onSuccess(e) {
				this.posterImage = e;
				console.log(e);
			},
			// 开始绘制
			onPoster() {
				this.posterImage = '';
				// uni.hideTabBar();
				this.canvasParams = this.getPosterFormatter();
				console.log(this.canvasParams, '成功的回调二维码')
				this.showPoster = true;
				this.showShare = false;
			},
			// 分享好友
			shareFriend() {
				let that = this;
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: that.shareInfo.path,
					title: that.shareInfo.title,
					summary: that.shareInfo.title,
					image: that.shareInfo.image,
					success: res => {
						console.log('success:' + JSON.stringify(res));
						this.showShare = false;
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif
				// #ifdef H5
				this.showShare = false;
				this.showShareGuide = true;
				// #endif
			},

			// 保存图片
			async saveImage() {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImage,
					success: res => {
						httpRequest.toast('保存成功')
						this.showPoster = false;
					},
					fail: err => {
						httpRequest.toast('保存失败')
						console.log(`图片保存失败:`, err);
					}
				});
			},
			// 复制链接
			copySharePath() {
				let that = this;
				uni.setClipboardData({
					data: that.shareInfo.copyLink,
					success: data => {
						that.$u.toast('已复制到剪切板');
						that.showShare = false;
					}
				});
			},
			// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
			getPosterFormatter() {
				const that = this;
				let data = {};

				switch (this.posterType) {
					case 'user':
						data = {
							backgroundImage: "https://sujianpaimai.com/uploads/20241009/000fada6ece566b12ccfc348861fedf6.png",
							drawArray: [{
									name: '用户昵称',
									type: 'text',
									text: that.userInfo.nickname,
									isBgCenter: true,
									size: 28,
									dy: 250,
									color: '#333',
									textAlign: 'middle',
									textBaseLine: 'middle'
								},
								{
									name: 'avatar',
									type: 'image',
									url: that.userInfo.avatar_text,
									alpha: 1,
									isBgCenter: true,
									dy: 95,
									dWidth: 120,
									dHeight: 120,
									circleSet: {}
								},
								// #ifdef MP-WEIXIN
								{
									name: 'wxCode',
									type: 'qrcode',
									// 'https://mall.modounb.com/' +
									text: that.qrcodeurl,
									// text: `https://mall.modounb.com/register.html?icode=${inviteCode.invite_code}`, //`${that.shareInfo.pathA}register.html?icode=${inviteCode.invite_code}`,
									size: 180,
									dy: 560,
									isBgCenter: true
								},
								// {//原本的
								// 	name: 'wxCode',
								// 	type: 'qrcode', //pages/index/homeRegister
								// 	// text: `register.html?icode=${inviteCode.invite_code}`, //`${that.shareInfo.pathA}register.html?icode=${inviteCode.invite_code}`,
								// 	text: `${that.shareInfo.pathA}register.html?icode=${inviteCode.invite_code}`,
								// 	size: 180,
								// 	dy: 560,
								// 	isBgCenter: true
								// },

								// {//最初的
								// 	name: 'wxCode',
								// 	type: 'image',
								// 	url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
								// 	alpha: 1,
								// 	dy: 560,
								// 	isBgCenter: true,
								// 	dWidth: 180,
								// 	dHeight: 180
								// },
								// #endif
								// #ifndef  MP-WEIXIN
								// let inviteCode = uni.getStorageSync('userInfo'); //data.invite_code
								// console.log(inviteCode.invite_code, '111')
								{
									name: '普通二维码',
									type: 'qrcode', //pages/index/homeRegister
									// text: `${that.shareInfo.pathA}pages/index/homeRegister?icode=${inviteCode.invite_code}`,
									text: that.qrcodeurl,
									//'http://mall.modounb.com/register.htlm?icode=' + inviteCode.invite_code,
									//that.shareInfo.path,
									size: 180,
									dy: 560,
									isBgCenter: true
								}
								// #endif
							]
						};
						break;
					case 'goods':
						data = {
							backgroundImage: that.initShare.goods_poster_bg,
							drawArray: [{
									name: 'avatar',
									type: 'image',
									url: that.userInfo.avatar,
									alpha: 1,
									dy: 40,
									dx: 38,
									dWidth: 80,
									dHeight: 80,
									circleSet: {}
								},
								{
									type: 'text',
									text: that.userInfo.nickname,
									size: 28,
									color: '#333',
									alpha: 1,
									textAlign: 'middle',
									textBaseline: 'bottom',
									dx: 140,
									dy: 40
								},
								{
									type: 'text',
									text: '推荐一个好物给你,请查收！',
									size: 26,
									color: '#333',
									alpha: 1,
									textAlign: 'middle',
									textBaseline: 'middle',
									dx: 140,
									dy: 80
								},
								{
									name: 'goodsImage',
									type: 'image',
									url: that.posterInfo.image,
									alpha: 1,
									isBgCenter: true,
									dy: 140,
									dWidth: 620,
									dHeight: 620,
									roundRectSet: {
										r: 20
									}
								},
								{
									type: 'text', //标题
									text: that.posterInfo.title,
									size: 28,
									color: '#333',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									fontWeight: 'bold',
									lineFeed: {
										maxWidth: 620,
										lineHeight: 40,
										lineNum: 2
									},
									dx: 36,
									dy: 780
								},
								{
									type: 'text',
									text: `￥${that.posterInfo.price}`,
									size: 38,
									color: '#E1212B',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									fontWeight: 'bold',
									fontFamily: 'OPPOSANS',
									dx: 30,
									dy: 860
								},
								{
									type: 'text',
									text: `￥${that.posterInfo.original_price}`,
									size: 28,
									color: '#999999',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'top',
									lineThrough: {
										style: '#999999'
									},
									dx: 400,
									dy: 860
								},
								// #ifdef MP-WEIXIN
								{
									name: 'wxCode',
									type: 'image', //微信小程序码
									url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
									alpha: 1,
									dx: 522,
									dy: 911,
									dWidth: 110,
									dHeight: 110
								},
								// #endif
								// #ifndef MP-WEIXIN
								{
									type: 'qrcode',
									text: that.shareInfo.copyLink,
									size: 110,
									dx: 530,
									dy: 930
								}
								// #endif
							]
						};
						break;
					case 'groupon':
						data = {
							backgroundImage: that.initShare.groupon_poster_bg,
							drawArray: [{
									name: 'avatar',
									type: 'image',
									url: that.userInfo.avatar,
									alpha: 1,
									dy: 40,
									dx: 38,
									dWidth: 80,
									dHeight: 80,
									circleSet: {}
								},
								{
									type: 'text',
									text: that.userInfo.nickname,
									size: 28,
									color: '#333',
									alpha: 1,
									textAlign: 'middle',
									textBaseline: 'bottom',
									dx: 140,
									dy: 40
								},
								{
									type: 'text',
									text: '发现一个好物，快来和我一起拼吧！',
									size: 26,
									color: '#333',
									alpha: 1,
									textAlign: 'middle',
									textBaseline: 'middle',
									dx: 140,
									dy: 80
								},
								{
									name: 'goodsImage',
									type: 'image',
									url: that.posterInfo.goods.image,
									alpha: 1,
									isBgCenter: true,
									dy: 140,
									dWidth: 620,
									dHeight: 620,
									roundRectSet: {
										r: 20
									}
								},
								{
									type: 'text', //标题
									text: that.posterInfo.goods.title,
									size: 28,
									color: '#333',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									fontWeight: 'bold',
									lineFeed: {
										maxWidth: 620,
										lineHeight: 40,
										lineNum: 2
									},
									dx: 36,
									dy: 780
								},
								{
									type: 'text',
									text: `拼团价：￥${that.posterInfo.goods.groupon_price}`,
									size: 32,
									color: '#E1212B',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									fontWeight: 'bold',
									fontFamily: 'OPPOSANS',
									dx: 30,
									dy: 860
								},
								{
									type: 'text',
									text: `${that.posterInfo.num}人团`,
									size: 24,
									color: '#fff',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'top',
									dx: 565,
									dy: 863
								},
								// #ifdef MP-WEIXIN
								{
									name: 'wxCode',
									type: 'image', //微信小程序码
									url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
									alpha: 1,
									dx: 530,
									dy: 930,
									dWidth: 110,
									dHeight: 110
								},
								// #endif
								// #ifndef MP-WEIXIN
								{
									type: 'qrcode',
									text: that.shareInfo.path,
									size: 110,
									dx: 530,
									dy: 930
								}
								// #endif
							]
						};
						break;
					default:
						console.log('%cerr:没有此类型海报数据', 'color:green;background:yellow');
						break;
				}
				return data;
			}
		}
	}
</script>

<style lang="scss">
	.yqgz{
		position: fixed;
		right: 0;
		top: 60rpx;
		background-color: #60554a;
		padding: 5rpx 20rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 50rpx 0 0 50rpx;
		z-index: 5;
	}
	.sharebox {
		background-color: #fff1dd;
		width: 330rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;

		image {
			width: 76rpx;
			height: 76rpx;
		}
	}

	page {
		background-color: #f8d5a2;
	}

	.xiaojin {
		color: #A07724;
	}

	.wzyqm {
		color: #A07724;
		background-color: #F2D5AC;
		padding: 5rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.toptext {
		font-size: 76rpx;
		font-weight: 800;
		background-image: linear-gradient(to bottom, #F3BC49, #6C5016);
		color: transparent;
		-webkit-background-clip: text;
		/* text-shadow: -1px 0px 0px #fff, 0px 1px 0px #fff, 1px 0px 0px #fff, 0px -1px 0px #fff; */
	}

	.topimg {
		background-image: url("@/static/image/system/sharebg.png");
		background-size: 750rpx 698rpx;
	}

	.topdingwei {
		position: absolute;
		top: 0;
		left: 0;
		// z-index: 100;
		width: 100%;

		image {
			width: 100%;
			height: 698rpx;
		}
	}

	.topbgc {
		background-color: #f7eadb;
		height: 40vh;
	}

	.wallitbg {
		position: relative;
		top: -300rpx;
	}

	.wallitbgimg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 676rpx;
	}
</style>
<style lang="scss">
	// 指引
	.guide-wrap {
		height: 100%;

		.guide-img {
			width: 580rpx;
			height: 430rpx;
		}
	}

	// 分享海报
	.poster-btn-box {
		.cancel-btn {
			width: 300rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #ffffff;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}

		.save-btn {
			width: 300rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.poster-img-box {
		.poster-img {
			width: 630rpx;
			min-height: 800rpx;
			border-radius: 20rpx;
		}
	}

	// 分享tool
	.share-box {
		background: #fff;
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 30rpx;
		position: relative;

		.share-foot {
			font-size: 24rpx;
			color: #bfbfbf;
			height: 80rpx;
			border-top: 1rpx solid #eee;
		}

		.share-list-box {
			.share-btn {
				background: none;
				border: none;
				line-height: 1;
				padding: 0;

				&::after {
					border: none;
				}
			}

			.share-item {
				flex: 1;
				padding-bottom: 20rpx;

				.share-img {
					width: 70rpx;
					height: 70rpx;
					background: rgba(246, 246, 254, 1);
					border-radius: 50%;
					margin-bottom: 20rpx;
				}

				.share-title {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>